<!--
 * @Author: lmq
 * @Date: 2023-11-07 14:53:23
 * @LastEditTime: 2023-11-16 15:48:33
-->
<!--
 * @Author: lmq
 * @Date: 2023-11-07 11:35:23
 * @LastEditTime: 2023-11-09 14:33:20
-->
<script setup>
  import { ref, reactive } from 'vue'
  import { getBasicEquipmentList, addBasicEquipment, editBasicEquipment, delBasicEquipment } from "@/api/baseConfig.js"
  import tablePageSetting from "@/hooks/index.js"
  import { ElMessage } from 'element-plus'
  import formSetting from "@/views/baseConfig/form.js"
  const { headerStyle, tableData, page, total, loading, handleCurrentChange, getList, handelConfirmFun } = tablePageSetting(getBasicEquipmentList, {});
  const { type, editVisible, btnLoading, ruleFormRef, form, addItem, handleEdit, submitForm, resetForm } = formSetting(getList, addBasicEquipment, editBasicEquipment);

  const size = ref("large");

  const showPage = ref(false) //分页只有一页时是否显示

  const rules = reactive({
    equipName: [
      { required: true, message: '请输入设备名称', trigger: 'blur' },
    ],
    equipNo: [
      { required: true, message: '请输入设备编号', trigger: 'blur' },
    ],
  })
  // 删除数据
  const handelDelete = (e) => {
    let { row } = e;
    if (!row.id) return;
    btnLoading.value = true;
    delBasicEquipment({
      id: row.id
    })
      .then(res => {
        if (res.code == 0) {
          ElMessage.success(`操作成功`);
          if (page.page > 1 && tableData.value.length < 2) page.page = page.page - 1;
          getList();
        } else {
          ElMessage.error(res.message);
        }
      })
      .finally(() => {
        btnLoading.value = false;
      });
  }
  onMounted(() => {
    getList();
  })


</script>

<template>
  <div class="pad-25 bg-fff heiall">
    <div class="handle-box flex align-center">
      <el-button type="primary" class="handle-del mar-r-10" @click="addItem" :size="size">新建
      </el-button>
    </div>
    <div class="container">
      <el-table :data="tableData" style="width: 100%" header-cell-class-name="table-header" v-loading="loading"
        :header-cell-style="headerStyle" :size="size">
        <el-table-column prop="equipName" label="设备名称" />
        <el-table-column prop="equipNo" label="设备编号" />
        <el-table-column prop="gmtModify" label="最近更新时间" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-text @click="handleEdit(scope.$index, scope.row)" type="primary" class="pointer">编辑</el-text>
            <el-divider direction="vertical" />
            <el-text @click="handelConfirmFun(scope.$index, scope.row,'确定删除设备？',handelDelete)" type="primary"
              class="pointer">删除</el-text>
          </template>
        </el-table-column>

      </el-table>
      <div class="mar-t-20">
        <el-pagination layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"
          v-model:current-page="page.page" :hide-on-single-page="showPage" />
      </div>
    </div>
    <el-drawer v-model="editVisible" direction="rtl" :append-to-body="true" :title="type!='add'?'编辑设备':'新增设备'"
      @closed="resetForm(ruleFormRef)">

      <template #default>
        <el-form :model="form" label-width="100px" :rules="rules" ref="ruleFormRef" :size="size">
          <el-form-item label="设备名称" prop="equipName">
            <el-input v-model.trim="form.equipName" show-word-limit maxlength="20" />
          </el-form-item>
          <el-form-item label="设备编号" prop="equipNo">
            <el-input v-model.trim="form.equipNo" show-word-limit maxlength="20" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="editVisible=false" :size="size">返回</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)" :size="size" :loading="btnLoading">完成</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
  @import "@/assets/mixin/css/tablePublic";
</style>